<template>
  <div class="transfer_wrap">
    <headTop :headClass="'white_header'">Transfer accounts</headTop>
    <div class="user_msg">
      <div class="header_img">
        <img :src="headImg" alt="">
      </div>
      <span class="name">{{userName}}</span>
      <span class="user_id">UID {{userId}}</span>
      <span class="phone">{{userPhone ? HidePhone(userPhone) : userPhone}}</span>
    </div>
    <div class="turn_out">
      <div class="turn_out_title">
        <span>Transfer amount</span>
        <div class="sel_country" @click="selCountry">
          <span>{{country}}</span>
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div>
      </div>
      <div class="input_wrap">
        <input type="number" placeholder="0" v-model="money" @input="clearNum">
      </div>
      <div class="exchange mine">
        <span class="left">My Now point :  {{balance}} CNY</span>
      </div>
      <div class="exchange">
        <span class="left">Turn point <span class="auto">(Automatic conversion)</span></span>
        <span class="right">{{RMB}} {{unit}}</span>
      </div>
    </div>
    <div class="confirm">
      <span class="public_btn" @click="submit">Check out</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'transferAccounts',
  data () {
    return {
      headImg: '',
      userName: '',
      userId: '',
      userPhone: '',
      money: '',
      balance: '',
      country: 'China[CNY]',
      unit: '',
      countryIndex: '',
      proportion: ''
    };
  },
  computed: {
    RMB () {
      if (this.money) {
        return (parseFloat(this.money) * parseFloat(this.proportion)).toFixed(2);
      } else {
        return '0.00';
      }
    },
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  beforeMount () {
    if (localStorage.ind) {
      this.countryIndex = localStorage.getItem('ind');
    } else {
      this.countryIndex = 0;
    }
    let area = localStorage.getItem('area');
    if (area) {
      area = JSON.parse(area);
      this.country = area.area;
      // let reg = /[A-Z]+/g;
      // this.unit = this.country.match(reg)[0];
      var m = this.country.match(/([^[\]]+)(?=\])/g);
      this.unit = m[0];
    }
    this.getProportion();
    this.getInfo();
  },
  methods: {
    // Clear the two decimal places.
    clearNum () {
      if (/\./g.test(this.money) && this.money.toString().split('.')[1].length > 2) {
        this.money = this.money.substr(0, this.money.length - 1);
      }
    },
    // Transfer of accounts
    submit () {
      if (!this.money) {
        this.Toast('Please input the transfer amount.');
      } else if (parseFloat(this.money) <= 0) {
        this.Toast('Transfer amount is not legal.');
      } else if (parseFloat(this.money) > parseFloat(this.balance)) {
        this.Toast('Sorry, your credit is running low');
      } else {
        this.isSetPwd();
      }
    },
    // Getting transfer information
    getInfo () {
      this.axios.get('index/users/zhuan').then(({data}) => {
        if (data.status === 200) {
          this.headImg = data.data.avatar;
          this.userPhone = data.data.mobile;
          this.userId = data.data.uid;
          this.balance = data.data.my_b;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Submission
    confirm () {
      this.axios.post('index/transfer/confirmation', {
        account: this.userId,
        money: this.money,
        pay_password: this.passWord,
        phone: this.userPhone.slice(7),
        country: this.countryIndex
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Turn out to be successful');
          this.$router.replace({path: 'transferSuccess', query: {money: this.money}});
        } else {
          this.Toast(data.message);
        }
      });
    },
    selCountry () {
      this.$router.push('countryChoose');
    },
    // Acquiring country ratio
    getProportion () {
      this.axios.post('index/transfer/confconfirmation_rate', {
        country: this.countryIndex
      }).then(({data}) => {
        if (data.status === 200) {
          this.proportion = data.data;
          console.log(this.proportion);
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.ShowPassword(() => {
            this.confirm();
          });
        } else {
          this.Modal('Set transaction password', 'Only after setting the transaction password can you purchase the operation., Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scpoed>
  @import '../style/mixin.scss';
  .transfer_wrap{
    padding-top: 90px;
    background-color: #f5f5f5;
    .user_msg{
      width: 100%;
      padding: 40px 0 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .header_img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-bottom: 24px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: 30px;
        color: #282828;
        margin-bottom: 14px;
      }
      .user_id{
        font-size: 24px;
        color: #999;
        margin-bottom: 30px;
      }
      .phone{
        font-size: 28px;
        color: #666;
      }
    }
    .turn_out{
      width: 100%;
      background-color: #fff;
      padding: 0 32px;
      margin-bottom: 96px;
      .turn_out_title{
        width: 100%;
        height: 86px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        color: #999;
        .sel_country{
          display: flex;
          align-items: center;
          >span{
            font-size: 26px;
            color: $color;
            margin-right: 10px;
          }
          .iconfont{
            font-size: 24px;
            color: #999;
            margin-top: 2px;
          }
        }
      }
      .input_wrap{
        width: 100%;
        height: 106px;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
        input{
          font-size: 60px;
          color: #282828;
          padding-left: 42px;
          width: 100%;
          height: 100%;
          &::placeholder{
            font-size: 60px;
            color: #999;
          }
        }
        &::before{
          display: block;
          content: '';
          width: 2px;
          height: 50px;
          background-color: #999;
          position: absolute;
          bottom: 30px;
          left: 10px;
        }
      }
      .exchange{
        width: 100%;
        height: 106px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          font-size: 28px;
          color: #666;
        }
        .right{
          font-size: 30px;
          color: #282828;
        }
        &.mine{
          border-bottom: 1px solid #e6e6e6;
        }
      }
    }
    .confirm{
      width: 100%;
      text-align: center;
    }
  }
</style>
